// =============================================================================
// SCSS/SITE/STACKS/ETHOS/_ILIGHTBOX.SCSS
// -----------------------------------------------------------------------------
// Styles for iLightBox.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Light Skin
//   02. Reset Styles
//   03. Global Styles
// =============================================================================

// Light Skin
// =============================================================================

.ilightbox-overlay.light {
  background: $baseModBackground;
}

.ilightbox-loader.light {
  -webkit-box-shadow: 0px 0px 85px hsla(255, 90%, 90%, 1), 0px 0px 85px hsla(255, 90%, 90%, 1);
          box-shadow: 0px 0px 85px hsla(255, 90%, 90%, 1), 0px 0px 85px hsla(255, 90%, 90%, 1);
}

.ilightbox-loader.light div {
  background: $baseModBackground url('../../../../framework/img/global/ilightbox-preloader-#{$skin}.gif') no-repeat center;
}

.ilightbox-holder.light {
  padding: 1%;
  background: $baseModBackground;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}

.ilightbox-holder.light .ilightbox-container .ilightbox-caption {
  background-color: $baseModBackground;
}

.ilightbox-holder.light .ilightbox-container .ilightbox-social {
  border-radius: 2px;
}

.ilightbox-holder.light .ilightbox-alert {
  color: #89949B;
}

.ilightbox-toolbar.light {
  top: 8px;
  left: 8px;
  height: 23px;
  background-color: $baseModBackground;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
}

.ilightbox-toolbar.light a {
  width: 25px;
  height: 23px;
  text-align: center;
}

.ilightbox-toolbar.light a.ilightbox-close {
  border-radius: 3px 0 0 3px;
}

.ilightbox-toolbar.light a.ilightbox-fullscreen {
  border-radius: 0 3px 3px 0;
}

.ilightbox-toolbar.light a:before {
  display: inline-block;
  @include font-awesome();
}

.ilightbox-toolbar.light a.ilightbox-close:before {
  content: "\f00d";
  @include font-size(1.5);
  line-height: 22px;
}

.ilightbox-toolbar.light a.ilightbox-fullscreen:before {
  content: "\f0c8";
  @include font-size(1.1);
  line-height: 23px;
}

.ilightbox-toolbar.light a.ilightbox-prev-button,
.ilightbox-toolbar.light a.ilightbox-next-button {
  display: none;
}

.ilightbox-thumbnails.light .ilightbox-thumbnails-grid .ilightbox-thumbnail img {
  border-radius: 2px;
}

.ilightbox-thumbnails.light .ilightbox-thumbnails-grid .ilightbox-thumbnail .ilightbox-thumbnail-video {
  background: url('../../../../framework/img/global/ilightbox-thumb-overlay-play-#{$skin}.png') no-repeat center;
}

.ilightbox-holder.light .ilightbox-inner-toolbar .ilightbox-title {
  padding: 10px 8px;
  padding-right: 60px;
  font-size: 18px;
}

.ilightbox-holder.light .ilightbox-inner-toolbar .ilightbox-toolbar {
  top: 5px;
  left: auto;
  right: 5px;
}

.ilightbox-holder.light .ilightbox-inner-toolbar .ilightbox-toolbar a {
  float: right;
}

.ilightbox-holder.light .ilightbox-inner-toolbar .ilightbox-toolbar a:first-of-type {
  border-radius: 0 3px 3px 0;
}

.ilightbox-holder.light .ilightbox-inner-toolbar .ilightbox-toolbar a:last-of-type {
  border-radius: 3px 0 0 3px;
}



// Reset Styles
// =============================================================================

.ilightbox-overlay,
.ilightbox-loader,
.ilightbox-loader *,
.ilightbox-holder,
.ilightbox-holder .ilightbox-container,
.ilightbox-holder .ilightbox-container img.ilightbox-image,
.ilightbox-holder .ilightbox-container .ilightbox-caption,
.ilightbox-toolbar,
.ilightbox-toolbar *,
.ilightbox-thumbnails,
.ilightbox-thumbnails *,
.ilightbox-holder .ilightbox-container .ilightbox-social,
.ilightbox-holder .ilightbox-container .ilightbox-social * {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  line-height: 100%;
  vertical-align: baseline;
  background: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: -moz-none;
       -o-user-select: none;
          user-select: none;
}



// Global Styles
// =============================================================================

.ilightbox-closedhand * {
  cursor: url(closedhand.cur), default !important;
}

.ilightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
}

.ilightbox-loader {
  position: fixed;
  top: 45%;
  left: -192px;
  padding-left: 30px;
  @include opacity(0.9);
  border-radius: 0 100px 100px 0;
  z-index: 100005;
}

.ilightbox-loader div {
  width: 72px;
  height: 72px;
  border-radius: 0 100px 100px 0;
}

.ilightbox-loader.horizontal {
  top: -192px;
  left: 45%;
  padding: 0;
  padding-top: 30px;
  border-radius: 0 0 100px 100px;
}

.ilightbox-loader.horizontal  div {
  border-radius: 0 0 100px 100px;
}

.ilightbox-toolbar {
  display: none;
  position: fixed;
  z-index: 100010;
}

.ilightbox-toolbar a {
  float: left;
  cursor: pointer;
}

.ilightbox-thumbnails {
  display: block;
  position: fixed;
  z-index: 100009;
}

.ilightbox-thumbnails.ilightbox-horizontal {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
}

.ilightbox-thumbnails.ilightbox-vertical {
  top: 0;
  right: 0;
  width: 140px;
  height: 100%;
  overflow: hidden;
}

.ilightbox-thumbnails .ilightbox-thumbnails-container {
  display: block;
  position: relative;
}

.ilightbox-thumbnails.ilightbox-horizontal .ilightbox-thumbnails-container {
  width: 100%;
  height: 100px;
}

.ilightbox-thumbnails.ilightbox-vertical .ilightbox-thumbnails-container {
  width: 140px;
  height: 100%;
}

.ilightbox-thumbnails .ilightbox-thumbnails-grid {
  display: block;
  position: absolute;
}

.ilightbox-thumbnails .ilightbox-thumbnails-grid .ilightbox-thumbnail {
  display: block;
  position: relative;
  padding: 10px;
  cursor: pointer;
}

.ilightbox-thumbnails .ilightbox-thumbnails-grid .ilightbox-thumbnail img {
  width: 100%;
  height: 100%;
  border-radius: 2px;
}

.ilightbox-thumbnails .ilightbox-thumbnails-grid .ilightbox-thumbnail .ilightbox-thumbnail-icon {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  @include opacity(0.7);
}

.ilightbox-thumbnails .ilightbox-thumbnails-grid .ilightbox-thumbnail .ilightbox-thumbnail-icon:hover {
  @include opacity(1);
}

.ilightbox-holder {
  display: none;
  position: fixed;
  z-index: 100003;
}

.ilightbox-holder.ilightbox-next,
.ilightbox-holder.ilightbox-prev {
  cursor: pointer;
}

.ilightbox-holder div.ilightbox-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.ilightbox-holder img.ilightbox-image {
  width: 100%;
  height: 100%;
}

.ilightbox-holder .ilightbox-container .ilightbox-caption {
  display: none;
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 0;
  max-width: 100%;
  margin: 0 auto;
  padding: 5px 10px;
  @include font-size(1.2);
  line-height: 150%;
  word-wrap: break-word;  
  text-align: center;
  border-radius: 3px 3px 0 0;
  @include box-sizing(border-box);
  z-index: 20003;
  @include break(cubs) {
    @include font-size(1.0);
  }
  @include break(baby-bear) {
    @include font-size(0.8);
  }
}

// .ilightbox-holder .ilightbox-container .ilightbox-social {
//   display: none;
//   position: absolute;
//   top: 10px;
//   left: 10px;
//   padding: 5px;
//   padding-left: 0;
//   height: 16px;
//   z-index: 20003;
// }

// .ilightbox-holder .ilightbox-container .ilightbox-social ul {
//   float: left;
//   list-style: none;
//   height: 16px;
// }

// .ilightbox-holder .ilightbox-container .ilightbox-social ul li {
//   display: inline;
// }

// .ilightbox-holder .ilightbox-container .ilightbox-social ul li a {
//   float: left;
//   margin-left: 5px;
//   width: 16px;
//   height: 16px;
//   background-repeat: no-repeat;
//   background-position: 50%;
// }

// .ilightbox-holder .ilightbox-container .ilightbox-social ul li.facebook a {
//   background-image: url('../social_icons/facebook_16.png');
// }

// .ilightbox-holder .ilightbox-container .ilightbox-social ul li.digg a {
//   background-image: url('../social_icons/digg_16.png');
// }

// .ilightbox-holder .ilightbox-container .ilightbox-social ul li.twitter a {
//   background-image: url('../social_icons/twitter_16.png');
// }

// .ilightbox-holder .ilightbox-container .ilightbox-social ul li.delicious a {
//   background-image: url('../social_icons/delicious_16.png');
// }

// .ilightbox-holder .ilightbox-container .ilightbox-social ul li.reddit a {
//   background-image: url('../social_icons/reddit_16.png');
// }

// .ilightbox-holder .ilightbox-container .ilightbox-social ul li.googleplus a {
//   background-image: url('../social_icons/google_plus_16.png');
// }

.ilightbox-holder .ilightbox-alert {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 50px;
  margin: auto;
  padding-top: 100px;
  text-align: center;
}

.ilightbox-holder .ilightbox-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.ilightbox-holder .ilightbox-inner-toolbar {
  position: relative;
}

.ilightbox-holder .ilightbox-inner-toolbar .ilightbox-toolbar {
  position: absolute;
}